<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>透明度的变化</title>
	<style type="text/css">
		*{
			margin: 0;padding: 0;
		}
		#main{
			width: 100px;height: 100px;background: red;opacity: 0.2;
		}
	</style>
</head>
<body>
<div id="main"></div>
<script type="text/javascript">
var oDiv = document.getElementById('main');
var style1 = oDiv.currentStyle;//非主流浏览器
var style2 = getComputedStyle(oDiv,false);//主流浏览器
console.log(style1);
console.log(style2);
// 获得元素的css属性的值
// 参数1：获得节点对象的css属性值（该对象）
// 参数2：获得该节点对象的什么属性（属性名）
function getStyle(element,attr) {
	if (window.currentStyle) {
		return element.currentStyle[attr];
	}else{
		return getComputedStyle(element,false)[attr];
	}
}
var style3 = getStyle(oDiv,'opacity');
console.log(style3);
var timer;
oDiv.onmouseover = function () {
	// body...
	clearInterval(timer);
	timer = setInterval(function () {
		var now = parseInt(getStyle(oDiv,'opacity')*100);
		now = now+10;
		oDiv.style.opacity = now/100;
		document.title = getStyle(oDiv,'opacity');
		if (getStyle(oDiv,'opacity')==1) {
			clearInterval(timer);
		}
	},50)
}
oDiv.onmouseout = function () {
	// body...
	clearInterval(timer);
	timer = setInterval(function () {
		var now = parseInt(getStyle(oDiv,'opacity')*100);
		now = now-10;
		oDiv.style.opacity = now/100;
		document.title = getStyle(oDiv,'opacity');
		if (getStyle(oDiv,'opacity')==0.2) {
			clearInterval(timer);
		}
	},50)
}
</script>
</body>
</html>